<template>
	<view class="content">
		<view class="head">
			<view class="photo">
				<image v-if="loginStatus" :src="userInfo.photo" mode=""></image>
				<image v-else src="../../static/work.png" mode=""></image>
				<!-- <text class="role" v-if="loginStatus">
					<text class="cuIcon-vip"></text>
					<text v-if="userInfo.isShare">股东</text>
					<text v-if="userInfo.isGod">客户</text>
					<text v-if="userInfo.isUser">管理员</text>
					<text v-if="userInfo.isWork">工程人员</text>
				</text> -->
			</view>
			<view class="msg">
				<view class="name">
					<text>{{userInfo.name||"未登录"}}</text>
				</view>
				<view class="id">
					<text>ID:</text>
					<text>{{userInfo.id||""}}</text>
				</view>
				<view @tap="toLogin()" class="in-login" v-if="!loginStatus">
					<text>登录</text>
				</view>
				
				<view class="out-login" @tap="toOutLogin()" v-else>
					<text>注销登录</text>
				</view>
			</view>
		</view>
		<view class="menu">
			<view class="menu-head">
				<!-- <text style="color: #ffa23e; margin-right: 10rpx;" class="cuIcon-service"></text> -->
				<text>我的服务</text>
			</view>
			<view class="menu-list">
				<view class="menu-item" v-if="i.isShow" @tap="toPage(i)" v-for="(i,j) in menuList" :key='j'>
					<text class="icons" :style="[{color: i.color}]" :class="i.icon"></text>
					<text style="font-size: 24rpx;">{{i.name}}</text>
				</view>
			</view>
		</view>
		<view class="cu-list menu margin-top" v-if="false">
			<view class="cu-item" v-for="(i,j) in functionList" :key="j" :class="menuArrow?'arrow':''">
				<view class="content">
					<text style="color: #fc9903;" :class="i.icon" class="text-grey"></text>
					<text >{{i.name}}</text>
				</view>
				<view class="action">
					<text class="cuIcon-right"></text>
				</view>
			</view>
		</view>
		
		<button type="default" class="serve" open-type="contact">
			<text class="cuIcon-service" style="margin-right: 10rpx;"></text>
			<text>联系客服</text>
		</button><!-- 
		<view class="footer">
			<text>版本号v1.0.0</text>
		</view> -->
	</view>
</template>

<script>
	import api from "../../network/index.js"
	let timer;
	export default {
		methods:{
			// 退出登录
			toOutLogin(){
				const t = this
				uni.showModal({
					title:"是否退出登录",
					complete(res) {
						if(res.confirm){
							t.$store.commit('loginOut')
							uni.showToast({
								icon: "none",
								title: "退出成功"
							})
							t.toRule()
						}
					}
				})
			},
			// 筛选权限
			toRule(){	
				if(this.$store.state.user.loginStatus){
					// 每次进来读取一边用户的信息
					let data = this.$store.state.user.userInfo
					api.request({
						url: api.USER_LIST,
						data:{
							id: "=,"+data.id
						}
					}).then(res=>{
						if(res.data.code == "200"){
							// 判断权限
							// console.log(res.data.list)
							let o = res.data.list.data[0]
							let obj = {
								id: o.id,
								photo: o.user_img,
								name: o.wx_nickname,
								isGod: false, // 是否是客户
								isShare: false, // 是否是股东
								isUser: false, // 是否是员工
								isWork: false, // 是否是工程人员
							}
							obj.isShare = Boolean(o.share)
							obj.isGod = Boolean(o.god)
							if(o.user_type_id == 0)obj.isUser = true
							if(o.user_type_id == 1)obj.isWork = true
							if(obj.isShare || obj.isGod){
								obj.isUser = false
								obj.isWork = false
							}
							if(obj.isShare){obj.share_id = o.share.id || 0}
							if(obj.isGod){obj.god_id = o.god.id || 0}
							
							this.$store.commit('login',obj)
							if(obj.isShare){
								this.menuList[1].isShow = false
								this.menuList[2].isShow = true
								this.menuList[3].isShow = false
								this.menuList[4].isShow = false
								this.menuList[5].isShow = false
							}
							if(obj.isGod){
								this.menuList[0].isShow = true
								this.menuList[1].isShow = false
								this.menuList[3].isShow = false
								this.menuList[4].isShow = false
								this.menuList[5].isShow = false
							}
							if (obj.isUser){
								this.menuList[0].isShow = true
								this.menuList[1].isShow = true
								this.menuList[2].isShow = false
								this.menuList[3].isShow = true
								this.menuList[4].isShow = false
								this.menuList[5].isShow = false
							}
							if (obj.isWork){
								this.menuList[0].isShow = false
								this.menuList[1].isShow = false
								this.menuList[2].isShow = false
								this.menuList[3].isShow = false
								this.menuList[4].isShow = true
								this.menuList[5].isShow = true
							}
						}else{
							api.error(res)
						}
					}).catch(err=>api.error(err))
				} else{
					this.menuList[0].isShow = false
					this.menuList[1].isShow = false
					this.menuList[2].isShow = false
					this.menuList[3].isShow = false
					this.menuList[4].isShow = false
					this.menuList[5].isShow = false
				}
			},
			// 登录
			toLogin(){
				const t = this
				// 获取用户授权,获取用户昵称头像
				wx.getUserProfile({
					desc: "获取您的昵称和头像",
					success(res1) {
						// console.log(res1)
						let photo = res1.userInfo.avatarUrl
						let name = res1.userInfo.nickName
						let obj = {
							photo: photo,
							name: name,
							isGod: false, // 是否是客户
							isShare: false, // 是否是股东
							isUser: false, // 是否是员工
							isWork: false, // 是否是工程人员
							god_id: 0, // 客户id若不是客户则为0
							share_id: 0, // 股东id若不是股东则为0
						}
						wx.login({
							complete(option) {
								// 发送登录请求获取user_id
								api.request({
									url: api.LOGIN,
									data:{
										code: option.code,
										publicToken: "abcdefg12"
									}
								}).then(res=>{
									
									// 如果返回乱码
									// if(res.statusCode == "200"){
									// 	let t = "script"
									// 	let s = res.data.split(t)[4].replace(">","")
									// 	res.data = JSON.parse(s)
									// 	res.data.code = "200"
									// }
									
									if(res.data.code == "200"){
										obj.token = res.data.token
										obj.id = res.data.id
										// 获取user_id成功后查询user表
										api.request({
											url: api.USER_LIST,
											data:{
												id: "=,"+res.data.id
											}
										}).then(res2=>{
											if(res2.data.code == "200"){
												// 判断权限
												let data = res2.data.list.data[0]
												
												obj.isShare = Boolean(data.share)
												obj.isGod = Boolean(data.god)
												if(data.user_type_id == 0)obj.isUser = true
												if(data.user_type_id == 1)obj.isWork = true
												if(obj.isShare || obj.isGod){
													obj.isUser = false
													obj.isWork = false
													if(obj.isShare){obj.share_id = data.share.id || 0}
													if(obj.isGod){obj.god_id = data.god.id || 0}
												}
												
												// console.log(obj)
												t.$store.commit('login',obj)
												// 插入头像与昵称
												api.request({
													url: api.USER_EDIT,
													data:{
														id: obj.id,
														wx_nickname: obj.name,
														user_img: obj.photo,
														coeffient: 0,
														fixed_wages: 0
													}
												}).then(res=>{
													if(res.data.code != "200")return api.error(res)
													t.toRule()
												}).catch(err=>api.error(err))
											}else{
												api.error(res2)
											}
										}).catch(err=>api.error(err))
									} else {
										api.error(res)
									}
								}).catch(err=>api.error(err))
								
							}
						})
					}
				})
			},
			// 跳转功能页面
			toPage(i){
				uni.navigateTo({
					url: i.url
				})
			}
		},
		computed:{
			userInfo(){
				return this.$store.state.user.userInfo
			},
			loginStatus(){
				return this.$store.state.user.loginStatus
			}
		},
		onLoad() {
			// wx.cloud.init()
			// wx.cloud.callFunction({
			// 	name: 'getOpenId',
			// 	complete(res){
			// 		console.log(res)
			// 	}
			// })
		},
		onShow() {
			this.toRule()
		},
		onPullDownRefresh (){
			setTimeout(()=>{
				this.toRule()
				uni.stopPullDownRefresh()
			},1000)
		},
		data() {
			return {
				// 主要角色 员工（管理员） 工程人员     股东 客户 
				menuList:[
					{
						name: "我的项目",
						icon: 'cuIcon-home',
						url: "./project/project",
						isShow: false,
						color: '#ffa23e'
					},
					{
						name: "我的合同",
						icon: 'cuIcon-text',
						url: "contract/contract",
						isShow: false,
						color: '#3d9aca'
					},
					{
						name: "我的设备",
						icon: 'cuIcon-paint',
						url: "equipment/equipment",
						isShow: false,
						color: '#ffa23e'
					},
					{
						name: "维保管理",
						icon: 'cuIcon-group',
						url: "towork/towork",
						isShow: false,
						color: '#e78092'
					},{
						name: "我的任务",
						icon: 'cuIcon-read',
						url: "task/task",
						isShow: false,
						color: '#9986d9'
					},{
						name: "我的绩效",
						icon: 'cuIcon-recharge',
						url: "part/part",
						isShow: false,
						color: '#4498cd'
					},{
						name: "客服咨询",
						icon: 'cuIcon-service',
						url: "",
						isShow: false,
						color: '#ffa23e'
					},{
						// 所有
						name: "关于企业",
						icon: 'cuIcon-safe',
						url: "./company/company",
						isShow: true,
						color: '#42b5db'
					},{
						// 所有
						name: "关于我们",
						icon: 'cuIcon-question',
						url: "./version/version",
						isShow: true,
						color: '#f36ed5'
					},{
						name: "用户协议",
						icon: 'cuIcon-addressbook',
						url: "./agreement/agreement",
						isShow: true,
						color: '#dd8691'
					},
				]
			};
		}
	}
</script>

<style lang="scss" scoped>
.serve{
	// outline: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 60rpx;
	width: 300rpx;
	border: 1rpx solid #FFFFFF;
	outline: none;
	background-color: #FFFFFF;
	color: #666;
	z-index: 100;
	text-align: center;
	font-size: 32rpx;
}
page,.content{
	width: 100vw;
	height: 100vh;
	background-color: #FFFFFF;
}
.menu{
	margin-top: 10rpx;
	padding: 0 20rpx;
	background-color: #FFFFFF;
	box-shadow: 4rpx 4rpx 8rpx #EEEEEE;
	.menu-head{
		height: 66rpx;
		line-height: 66rpx;
		font-size: 28rpx;
		font-weight: 800;
	}
	.menu-list{
		padding-bottom: 10rpx;
		display: flex;
		// justify-content: space-between;
		flex-wrap: wrap;
		.menu-item{
			margin: 4rpx 0;
			padding: 20rpx 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
			width: 33%;
			border: 1rpx solid #EEEEEE;
			.icons{
				font-size: 60rpx;
				margin: 16rpx 0;
			}
			&:hover{
				background-color: #f5f5f5;
			}
		}
	}
}
.footer{
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	line-height: 100rpx;
	font-size: 28rpx;
	text-align: center;
}
.head{
	position: relative;
	padding-bottom: 10rpx;
	display: flex;
	background-color: #FFFFFF;
	border-bottom-right-radius: 10%;
	border-bottom-left-radius: 10%;
	box-shadow: 4rpx 4rpx 8rpx #eee;
	.photo{
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 40rpx;
		image{
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			background-color: #FFFFFF;
			border: 1rpx solid #EEEEEE;
			box-shadow: 4rpx 4rpx 8rpx #eee;
		}
		.role{
			padding: 5rpx 15rpx;
			margin-top: 10rpx;
			font-size: 26rpx;
			color: #8799a3;
			background-color: #fde6d2;
			border-radius: 20rpx;
			.cuIcon-vip{
				margin-right: 5rpx;
			}
		}
	}
	.msg{
		padding: 40rpx 20rpx;
		view{
			margin: 20rpx 0;
		}
		.name{
			font-size: 30rpx;
			font-weight: 800;
			
		}
		.id{
			font-size: 24rpx;
			color: #AAAAAA;
		}
		.out-login{
			position: absolute;
			right: 40rpx;
			bottom: 40rpx;
			padding: 10rpx 14rpx;
			color: #FFFFFF;
			font-size: 26rpx;
			background-color: #e54d42;
			border-radius: 20rpx;
		}
		.in-login{
			position: absolute;
			right: 40rpx;
			bottom: 40rpx;
			padding: 10rpx 34rpx;
			color: #FFFFFF;
			font-size: 26rpx;
			background-color: #4CD964;
			border-radius: 20rpx;
		}
	}
}
</style>
